<!--
 * @Date: 2022-06-30 14:52:18
 * @LastEditTime: 2022-06-30 15:10:32
-->
<template>
  <div class="starBar">
    <i  v-for="(item,index) in stars" :key="index"  :class="item"></i>
  </div>
</template>

<script>
export default {
  name: 'StarBar',
  props: ['starNum'],
  data: () => {
    return {
      stars: []
    }
  },
  mounted: function () {
    for (let i = 0; i < 5; i++) {
      this.stars.push(i + 1 <= this.starNum ? 'el-icon-star-on' : 'el-icon-star-off')
    }
  }
}
</script>

<style>
.starBar > .el-icon-star-off {
  color: rgba(0,0,0,0.15);
}
.starBar > .el-icon-star-on {
  color: rgb(247, 186, 42);
}
</style>
